// Collapse

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin collapse {
  font-size: $--x-font-size;
  box-sizing: border-box;
  border-top: $--x-border-base;
  border-bottom: $--x-border-base;
  x-collapse-panel:last-child {
    .x-collapse-panel {
      &-header {
        border-bottom-color: transparent;
      }
    }
  }
}

@mixin collapse-panel {
  box-sizing: border-box;
  &-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: $--x-border-base;
    transition: border-color 0.3s;
    cursor: pointer;
    > .x-icon {
      margin-right: 0.125rem;
      color: $--x-text-300;
      transition: transform 0.3s;
    }
  }
  &-body {
    overflow: hidden;
    border-bottom: 0.0625rem solid transparent;
    transition: border-color 0.3s;
  }
  &-content {
    padding-bottom: 0.625rem;
  }
  &.x-activated {
    .x-collapse-panel-header {
      border-bottom-color: transparent;
      > .x-icon {
        transform: rotate(90deg);
      }
    }
    .x-collapse-panel-body {
      border-bottom-color: $--x-border;
    }
  }
}
